<script lang="ts">
import { defineComponent, ref } from 'vue';
import { IconPalette, IconCheck } from '@arco-design/web-vue/es/icon';

export default defineComponent({
  components: {
    IconPalette,
    IconCheck,
  },
  emits: ['change'],
  setup(_, { emit }) {
    const themes = [
      { name: '深紫', value: 'purple-dark', color: '#722ED1' },
      { name: '深蓝', value: 'blue-dark', color: '#165DFF' },
      { name: '深绿', value: 'green-dark', color: '#00B42A' },
      { name: '深红', value: 'red-dark', color: '#F53F3F' }
    ];
    
    const currentTheme = ref('purple-dark');
    
    const changeTheme = (theme: string) => {
      currentTheme.value = theme;
      emit('change', theme);
      const root = document.documentElement;
      root.className = ''; // 清除之前的主题类
      root.classList.add(`theme-${theme}`); // 添加新主题类
    };
    
    return {
      themes,
      currentTheme,
      changeTheme
    };
  }
});
</script>

<template>
  <div class="theme-switcher">
    <a-dropdown trigger="click">
      <a-button shape="circle">
        <template #icon>
          <icon-palette />
        </template>
      </a-button>
      <template #content>
        <div class="theme-list">
          <div
            v-for="theme in themes"
            :key="theme.value"
            class="theme-item"
            @click="changeTheme(theme.value)"
          >
            <div class="color-block" :style="{ backgroundColor: theme.color }" />
            <span>{{ theme.name }}</span>
            <icon-check v-if="currentTheme === theme.value" />
          </div>
        </div>
      </template>
    </a-dropdown>
  </div>
</template>

<style lang="scss" scoped>

.arco-tigger-pop {
  box-shadow: 0 1px 18px 0 rgba(1, 1, 1, 0.9);
}

.theme-switcher {
  margin-right: 16px;
}

.theme-list {
  min-width: 120px;
  padding: 8px;
  border-radius: 4px;
}

.theme-item {
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  &:hover,
  &:focus {
    background: var(--theme-7);
  }
}

.color-block {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  margin-right: 8px;
}

.theme-item span {
  flex: 1;
  color: var(--color-white);
}

.arco-icon-check {
  color: var(--color-primary-light-4);
  margin-left: 8px;
}

.arco-dropdown-option {
  background: transparent !important;
}

/* 按钮样式 */
.arco-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-6)!important;
  border-color: var(--theme-6)!important;
  color: var(--color-white);

  &:hover,
  &:focus {
    background-color: var(--theme-7)!important;
    border-color: var(--theme-7)!important;
  }
}
/* 图标样式 */
.arco-btn .arco-icon {
  font-size: 22px;  /* 增大图标尺寸 */
  color: var(--color-white);  /* 设置图标颜色为白色 */
}
</style> 